<template>
  <div class="settingPanel">
    <template v-if="formStore.questions.length === 0">
      <div class="tips">
        <span class="number">2.</span>
        添加试题后在这里进行编辑
      </div>
    </template>
    <template v-else>
      <div class="settingPanel__title">试题属性设置</div>
      <el-form
        :model="formStore.selectQuestion"
        size="small"
        label-position="top"
        label-width="120px"
        class="settingPanel__form"
        @submit.prevent
      >
        <div
          v-if="!!formStore.selectQuestion"
          class="settingPanel__form-module"
        >
          <template v-for="(type, propName) in commonProps">
            <component
              v-if="hasPropEditor(propName)"
              :is="getPropEditor(type)"
            />
          </template>
        </div>
      </el-form>
    </template>
  </div>
</template>

<script lang="ts" setup>
import editorComps from "./property-editor/index";
import { commonProps } from "./constants";
import { useFormStore } from "@bis/stores/form";

const formStore = useFormStore();

const getPropEditor = (type) => {
  return editorComps[type];
};

// 是否需要此编辑器
const hasPropEditor = (propName) => {
  const question = formStore.selectQuestion;
  return question.hasOwnProperty(propName);
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
